<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArcGIS 地图</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.22/"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
        }

        #viewDiv {
            height: 100%;
            width: 66.66%; /* 左侧三分之二 */
            float: left;
        }

        #rightDiv {
            height: 100%;
            width: 33.33%; /* 右侧三分之一 */
            float: left;
            display: flex;
            flex-direction: column; /* 纵向排列 */
            box-sizing: border-box;
            padding: 0 20px;
        }

        #formDiv {
            margin-bottom: 20px;
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        form label,
        form input {
            margin-bottom: 10px;
        }

        #dataArray {
            margin-top: 20px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 20px;
        }

        table,
        th,
        td {
            border: 1px solid #ddd;
        }

        th,
        td {
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        button {
            margin: 5px;
            padding: 5px;
        }
    </style>
</head>

<body>
<div id="viewDiv"></div>

<div id="rightDiv">
    <div id="formDiv">
        <h2 style="color: blue;">美食足迹<h3>添加美食</h3></h2>
        <form id="locationForm">
            <label for="longitude">经度:</label>
            <input type="text" id="longitude" name="longitude" required>

            <label for="latitude">纬度:</label>
            <input type="text" id="latitude" name="latitude" required>

            <label for="label">地点名称:</label>
            <input type="text" id="label" name="label" required>

            <button type="button" onclick="addLocation()">添加地点</button>
        </form>
    </div>

    <div id="dataArray">
        <h2>地点数组</h2>
        <table>
            <thead>
            <tr>
                <th>经度</th>
                <th>纬度</th>
                <th>地点名称</th>
            </tr>
            </thead>
            <tbody id="dataBody"></tbody>
        </table>
    </div>
</div>

<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/widgets/Home",
        "esri/widgets/Compass",
        "esri/widgets/ScaleBar",
        "esri/widgets/AreaMeasurement2D",
        "dojo/domReady!"
    ], function (Map, MapView, Graphic, SimpleMarkerSymbol, Home, Compass, ScaleBar, AreaMeasurement2D) {
        const beijingCenter = [116.403847, 39.915526];

        const map = new Map({
            basemap: "streets"
        });

        const view = new MapView({
            container: "viewDiv",
            map: map,
            center: beijingCenter,
            zoom: 11
        });
        
        // 从localStorage中获取位置信息
        let locations = JSON.parse(localStorage.getItem("locations"));

        // 如果localStorage数组为空，则初始化数组
        if (!locations || locations.length === 0) {
            // 随机生成两个点在北京
            function getRandomCoordinate(center, maxOffset) {
                return center + (Math.random() - 0.5) * maxOffset;
            }

            const point1 = [getRandomCoordinate(beijingCenter[0], 0.1), getRandomCoordinate(beijingCenter[1], 0.1), "鸭脖"];
            const point2 = [getRandomCoordinate(beijingCenter[0], 0.1), getRandomCoordinate(beijingCenter[1], 0.1), "炸酱面"];

            locations = [point1, point2];

            // 将默认地点存储到localStorage中
            localStorage.setItem("locations", JSON.stringify(locations));
        }

        // 初始化地图上的标点
        updateMap();

        // 初始化数组数据表格
        updateDataTable();

        // 添加Home按钮
        const homeWidget = new Home({ view: view });
        view.ui.add(homeWidget, "top-left");

        // 添加指南针
        const compassWidget = new Compass({ view: view });
        view.ui.add(compassWidget, "top-left");

        // 添加比例尺
        const scaleBar = new ScaleBar({ view: view });
        view.ui.add(scaleBar, "bottom-left");

        // 添加面积测量工具
        const areaMeasurement = new AreaMeasurement2D({ view: view });
        view.ui.add(areaMeasurement, "top-right");

 // 监听点击事件，弹出信息
        view.on("click", function (event) {
            view.hitTest(event).then(function (response) {
                if (response.results.length) {
                    const graphic = response.results[0].graphic;
                    view.popup.open({
                        location: event.mapPoint,
                        content: graphic.popupTemplate.content
                    });
                }
            });
        });

        // 更新地图上的标点
        function updateMap() {
            view.graphics.removeAll();

            locations.forEach(location => {
                const [longitude, latitude, label] = location;

                const point = {
                    type: "point",
                    longitude: longitude,
                    latitude: latitude
                };

                const markerSymbol = new SimpleMarkerSymbol({
                    color: [226, 119, 40],
                    outline: {
                        color: [255, 255, 255],
                        width: 2
                    },
                    size: 10
                });

                const graphic = new Graphic({
                    geometry: point,
                    symbol: markerSymbol,
                    attributes: {
                        label: label
                    },
                    popupTemplate: {
                        title: "位置信息",
                        content: "{label}"
                    }
                });

                view.graphics.add(graphic);
            });
        }
		
		// 更新数组数据表格
        function updateDataTable() {
            const dataBody = document.getElementById("dataBody");
            dataBody.innerHTML = "";

            locations.forEach(location => {
                const [longitude, latitude, label] = location;

                const row = document.createElement("tr");

                const tdLongitude = document.createElement("td");
                tdLongitude.textContent = longitude;
                row.appendChild(tdLongitude);

                const tdLatitude = document.createElement("td");
                tdLatitude.textContent = latitude;
                row.appendChild(tdLatitude);

                const tdLabel = document.createElement("td");
                tdLabel.textContent = label;
                row.appendChild(tdLabel);

                dataBody.appendChild(row);
            });
        }

        // 添加地点函数
        window.addLocation = function () {
            const longitude = parseFloat(document.getElementById("longitude").value);
            const latitude = parseFloat(document.getElementById("latitude").value);
            const label = document.getElementById("label").value;

            if (!isNaN(longitude) && !isNaN(latitude) && label.trim() !== "") {
                // 将新的地点数据添加到数组中
                locations.push([longitude, latitude, label]);

                // 更新localStorage
                localStorage.setItem("locations", JSON.stringify(locations));

                // 更新地图上的标点
                updateMap();

                // 更新数组数据表格
                updateDataTable();

                // 清空表单
                document.getElementById("locationForm").reset();
            } else {
                alert("请输入有效的经度、纬度和地点名称。");
            }
        };
    });


</script>
</body>

</html>